<template>
  <div class="eldan-upload-warp">
    <uni-file-picker
      :limit="limitValue"
      title=""
      v-model="file.list"
      :sourceType="['album', 'camera']"
      :sizeType="['original']"
      :auto-upload="false"
      :del-icon="!prop.disabled"
      :readonly="readonly"
      :disabled="disabled"
      @progress="onUploading"
      @select="onSelectFile"
      @success="onUploaded"
      @fail="onFileUploadFail"
      @delete="delFile"
    ></uni-file-picker>
  </div>
</template>

<script setup>
import { computed, defineEmits, reactive, watch } from 'vue'
import { StringUtils } from '../utils/StringUtils'

const emit = defineEmits(['sendData'])

const prop = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  },
  limit: {
    type: [String, Number],
    default: 9
  },
  files: {
    type: Array,
    default: () => []
  }
})

const limitValue = computed(() => {
  return StringUtils.getNumber(prop.limit, 0, 1)
})

const file = reactive({
  list: []
})

watch(
  () => prop.files,
  (files) => {
    file.list = files
  }
,{immediate:true,deep:true})

const onSelectFile = function (e) {
  const {
    progress,
    index,
    tempFile,
    // File Objects
    tempFiles,
    tempFilePaths
  } = e || {}
  console.log(e)
  emit('sendData', e)
}

const onUploading = function (e) {
  const { progress, index, tempFile, tempFiles, tempFilePaths } = e || {}
}

const onUploaded = function (e) {
  const { progress, index, tempFile, tempFiles, tempFilePaths } = e || {}
}

const onFileUploadFail = function (e) {
  const { progress, index, tempFile, tempFiles, tempFilePaths } = e || {}
}

const delFile = function (e) {
  const { progress, index, tempFile, tempFiles, tempFilePaths } = e || {}
  emit('sendData', e)
}
</script>

<style lang="scss" scoped>
.eldan-upload-warp {
  min-height: 150rpx;

  ::v-deep.uni-file-picker {
    .uni-file-picker__header {
      display: none;
    }

    .uni-file-picker__container {
      max-width: 520rpx;
      max-height: 250rpx;
      overflow: auto;
      justify-content: flex-end;
      display: flex;

      .file-picker__box {
        width: 150rpx !important;
        height: 150rpx !important;
        padding-top: 0;
      }
    }
  }
}
</style>
